<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商铺页面</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/slider.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop.css" type="text/css"/>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
    <script type="text/javascript" src="render/js/slider.js"></script>
    <style type="text/css">
        td.collect {
            cursor: pointer;
        }

        .tuijian_content_2_empty {
            /* margin: 80px 0; */
            margin: 146px 0px 146px 0px !important;
            text-align: center;
            font-size: 33px;
            width: 100% !important;
            color: red;
        }
        span.red {
            color: #73b31e;
            font-size: 17px;
        }

        .block ul li dl dt{
            width:160px;
            vertical-align: middle;
        }

        .tuijian_shangpin_img{
            border-radius: 8px;
            height: 102px !important;
            width: 155px !important;
        }

        .block ul li dl dd a {
            font-size: 12px;
            line-height: 18px;
            color: #555555;
        }

        .block ul li dl dd em{
            color: #cc0000;
            font-size: 14px;
            font-weight: bold;
            margin: 0 5px;
        }

        #tuijian_content_1_empty {
            /* margin: 80px 0; */
            margin: 72px 0px 0px 0px !important;
            text-align: center;
            font-size: 33px;
            width: 400px !important;
            color: red;
        }

        p.text-line {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>

<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="/render/shop/queryShopByShopId?shop_id=${shop.id}">${shop.shop_name}商铺</a>
    </span>
</div>
<div class="clear"></div>

<div class="shop_contain">
    <div class="shop_contain_content">
        <div class="head widthin left">
            <div class="nav">
                <ul class="menu6" id="menu6">
                    <li onmouseover="setTab(${categories.size()},0)" class="hover">店铺首页</li>
                    <c:forEach items="${categories}" var="category" varStatus="index">
                        <li onmouseover="setTab(${categories.size()},${index.count})" class="outer">${category.name}</li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="tjtz-main" id="main6">
            <ul class="block">
                <li>
                    <div class="content_box">
                        <div class="shop_left">
                            <div class="shop_detail" cellspacing="0" cellpadding="0">
                                <div class="shop_detail_top">
                                    <span class="shop_detail_top_name">掌柜档案</span>
                                </div>
                                <div class="shop_detail_content">
                                    <div class="shop_detail_content_box">
                                        <div>
                                            <span class="yellow">掌柜:&nbsp;&nbsp;</span><span>${user.username}</span>
                                        </div>
                                        <div>
                                            <span class="yellow">店名:&nbsp;&nbsp;</span><span>${shop.shop_name}</span>
                                        </div>
                                        <div>
                                            <span class="yellow">卖家信用:&nbsp;&nbsp;</span><span>暂无数据</span>
                                        </div>
                                        <div>
                                            <span class="yellow">买家好评:&nbsp;&nbsp;</span><span>暂无数据</span></div>
                                        <div>
                                            <span class="yellow">宝贝数量:&nbsp;&nbsp;</span><span>${shop_products.size()}</span>
                                        </div>
                                        <div>
                                            <span class="yellow">好评率:&nbsp;&nbsp;</span><span>暂无数据</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table id="shop_left_table" cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td valign="top" colspan="3" height="100">
                                            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                                                <tbody>
                                                <tr>
                                                    <td class="collect" width="190" height="100" onclick="collect('/render/collection/insert?shop_id=${shop.id}&shop_name=${shop.shop_name}')"><a href="javascript:void(0);"></a></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="12" height="7"></td>
                                        <td width="165"></td>
                                        <td width="13"></td>
                                    </tr>
                                    <tr>
                                        <td height="320"></td>
                                        <td valign="top">
                                            <div style="OVERFLOW-Y: auto; WIDTH: 165px; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 320px">

                                                <p><span class="red">开店时间：</span><br><br><span>${shop.shop_open_time}</span></p><br><br><br>
                                                <p><span class="red">本店介绍：</span><br><br><span>${shop.shop_introduce}</span></p>
                                            </div>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td height="23"></td>
                                        <td>&nbsp;</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="shop_right">
                            <div class="shop_right_top_left">
                                <%--主--%>
                                <div class="recommend_left">
                                    <div class="recommend_left_image">
                                        <span>
                                            <c:if test="${!empty shop_main_recommend}">
                                                <a href="/render/product/product_detail?id=${shop_main_recommend.id}">
                                                    <img src="${shop_main_recommend.main_image}" alt="本周主打" class="recommend_left_myimage">
                                                </a>
                                            </c:if>
                                            <c:if test="${empty shop_main_recommend}">
                                                <a href="javascript:void(0);">
                                                    <img src="" border="0">
                                                </a>
                                            </c:if>
                                        </span>
                                    </div>
                                    <div class="recommend_left_context">
                                        <span class="recommend_left_context_name">
                                            <p class="xie">${shop_main_recommend.name}</p>
                                            <p class="text-line">${shop_main_recommend.subtitle}</p>
                                        </span>
                                        <span class="recommend_left_context_price">
                                            <c:if test="${!empty shop_main_recommend}">
                                                ${shop_main_recommend.price}(元)
                                            </c:if>
                                            <c:if test="${empty shop_main_recommend}">
                                                暂无商品
                                            </c:if>
                                        </span>
                                    </div>
                                </div>
                                <%--推荐--%>
                                <div class="recommend_right">
                                    <div class="recommend_right_image">
                                        <div class="recommend_right_imageLeft">
                                            <div class="recommend_right_imageLeft_tu">
                                                <c:if test="${!empty shop_special_recommend_one}">
                                                    <a href="/render/product/product_detail?id=${shop_special_recommend_one.id}">
                                                        <img src="${shop_special_recommend_one.main_image}" border="0">
                                                    </a>
                                                </c:if>
                                                <c:if test="${empty shop_special_recommend_one}">
                                                    <a href="javascript:void(0);">
                                                        <img src="" border="0">
                                                    </a>
                                                </c:if>
                                            </div>
                                        </div>
                                        <div class="recommend_right_imageRight">
                                            <div class="recommend_right_imageLeft_tu">
                                                <c:if test="${!empty shop_special_recommend_two}">
                                                    <a href="/render/product/product_detail?id=${shop_special_recommend_two.id}">
                                                        <img src="${shop_special_recommend_two.main_image}" border="0" class="shopLef">
                                                    </a>
                                                </c:if>
                                                <c:if test="${empty shop_special_recommend_two}">
                                                    <a href="javascript:void(0);">
                                                        <img src="" border="0">
                                                    </a>
                                                </c:if>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="recommend_right_name">
                                        <div class="recommend_right_name_left">
                                            <p class="xie">${shop_special_recommend_one.name}</p>
                                            <p class="text-line">${shop_special_recommend_one.subtitle}</p>
                                        </div>
                                        <div class="recommend_right_name_right">
                                            <p class="xie">${shop_special_recommend_two.name}</p>
                                            <p class="text-line">${shop_special_recommend_two.subtitle}</p>
                                        </div>
                                    </div>

                                    <div class="recommend_right_price">
                                        <span class="recomend_right_price_left">
                                            <c:if test="${!empty shop_special_recommend_one}">
                                                ${shop_special_recommend_one.price}(元)
                                            </c:if>
                                            <c:if test="${empty shop_special_recommend_one}">
                                                暂无商品
                                            </c:if>
                                        </span>
                                        <span class="recommend_right_price_right">
                                            <c:if test="${!empty shop_special_recommend_two}">
                                                ${shop_special_recommend_two.price}(元)
                                            </c:if>
                                            <c:if test="${empty shop_special_recommend_two}">
                                                暂无商品
                                            </c:if>
                                        </span>
                                    </div>

                                    <div class="recommend_right_notice">
                                        <div class="overflowY">
                                            <div style="overflow-y: auto; width: 330px; scrollbar-base-color: #ffffff; height: 100px">
                                                <span>${shop.shop_notice}</span>
                                            </div>
                                        </div>

                                        <div class="recommend_right_collect" value="收藏" onclick="collect('/render/collection/insert?shop_id=${shop.id}&shop_name=${shop.shop_name}')"></div>
                                    </div>
                                </div>

                                <div class="scrollX">
                                    <div class="wrap">
                                        <c:if test="${!empty shop_products}">
                                            <ul class="block">
                                                <c:forEach items="${shop_products}" var="product">
                                                        <li>
                                                            <dl>
                                                                <dt>
                                                                    <a href="/render/product/product_detail?id=${product.id}">
                                                                        <img class="tuijian_shangpin_img" src="${product.main_image}"/>
                                                                    </a>
                                                                </dt>
                                                                <dd>
                                                                    <a href="/render/product/product_detail?id=${product.id}">
                                                                        销量：${product.sale_count}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 浏览量：${product.popularity}
                                                                    </a>
                                                                </dd>
                                                                <dd>
                                                                    <a href="/render/product/product_detail?id=${product.id}">
                                                                            ${product.name}
                                                                    </a>
                                                                </dd>
                                                                <dd> ￥：<em>${product.price}</em>(元)</dd>
                                                            </dl>
                                                        </li>
                                                    </c:forEach>
                                            </ul>
                                        </c:if>
                                        <c:if test="${empty shop_products}">
                                            <ul>
                                                <li id="tuijian_content_1_empty">该店铺暂无商品！</li>
                                                <li id="tuijian_content_1_empty">该店铺暂无商品！</li>
                                                <li id="tuijian_content_1_empty">该店铺暂无商品！</li>
                                                <li id="tuijian_content_1_empty">该店铺暂无商品！</li>
                                            </ul>
                                        </c:if>
                                    </div>
                                    <div>
                                        <a href="javascript:void(0);" class="goLeft"></a>
                                        <a href="javascript:void(0);" class="goRight"></a>
                                    </div>
                                </div>
                                <div class="connection">
                                    <div>
                                        <span>客服售后---电话：${shop.phone==null?"电话为空":shop.phone}&nbsp;&nbsp;，&nbsp;&nbsp;email：${shop.email==null?"邮箱为空":shop.email}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <c:if test="${!empty categories}">
                <c:forEach items="${categories}" var="category" varStatus="index">
                    <c:if test="${!empty shop_products}">
                        <c:set var="categoriesOne_count" value="${1}"></c:set>
                        <ul style="display: none;" id="productDisplay">
                            <%--根据shop_id和category_id查询商品--%>
<%--                            <li style="display: none;"></li>--%>
                            <c:forEach items="${shop_products}" var="shop_product">
                                <%--商品的category_id等于category的id--%>
                                <c:if test="${category.id==shop_product.category_id_next}">
                                    <c:set var="categoriesOne_count" value="${categoriesOne_count+1}"></c:set>
                                    <li>
                                        <div class="product-box">
                                            <div class="lefttu">
                                                <a href="/render/product/product_detail?id=${shop_product.id}">
                                                    <img src="${shop_product.main_image}" border="0">
                                                </a>
                                            </div>
                                            <div class="admminfo">
                                                <p>
                                                    <a href="/render/product/product_detail?id=${shop_product.id}">
                                                        ${shop_product.name}
                                                    </a>
                                                    <br>
                                                    <strong>现存货量：<span class="red">${shop_product.stock}</span> 件</strong><br>
                                                    <%--卖家:
                                                    <a href="http://s.click.taobao.com/t_8?e=7HZ6jHSTbIQ0E4ny1hFPEjt%2B%2B51bHYmNVpvgF9qIw%2BkI2g%3D%3D&amp;p=mm_13245640_0_0">
                                                        ${shop.shop_name}
                                                    </a>--%>
                                                    <a href="/render/product/product_detail?id=${shop_product.id}">
                                                        <img src="render/images/dianzhu.gif" border="0">
                                                    </a><br>
                                                    价格:<span class="green">${shop_product.price}</span>(元)<br>
                                                    <a href="/render/product/product_detail?id=${shop_product.id}">
                                                        <img src="render/images/xiangqing.gif" border="0">
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                </c:if>
                            </c:forEach>
                            <c:if test="${categoriesOne_count==1}">
                                <p class="tuijian_content_2_empty">该分类无商品</p>
                            </c:if>
                        </ul>
                    </c:if>
                    <c:if test="${empty shop_products}">
                        <ul style="display: none;">
    <%--                        根据shop_id和category_id查询商品--%>
                            <p class="tuijian_content_2_empty">该分类无商品</p>
                        </ul>
                    </c:if>
                </c:forEach>
            </c:if>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"></jsp:include>

</body>
<%--<link rel="stylesheet" href="render/css/frontend/HFAlert.css">--%>
<script type="text/javascript">
    function setTab(m, n) {
        var tli = document.getElementById("menu6").getElementsByTagName("li");
        var mul = getChildNodes('main6', 'UL');
        // var mul = document.getElementById("main6").getElementsByTagName("ul");
        for (var i = 0; i < tli.length; i++) {
            var flagTli = (i == n) ? "hover" : "outer";
            tli[i].setAttribute('class', flagTli);
            var flagMul = (i == n) ? "block" : "none";
            // console.log("i="+i);
            mul[i].style.display=flagMul;
        }
    }

    function getChildNodes(node, tagName) {
        if (typeof node == 'string') {
            node = document.getElementById(node);
        }
        var nodes = [];
        for (var i = 0, j = node.childNodes.length; i < j; i++){
            if (node.childNodes[i].nodeType == 1) {
                if (node.childNodes[i].tagName == tagName) {
                    nodes.push(node.childNodes[i]);
                    // console.log("node.childNodes[i]=" + node.childNodes[i])
                }
                // else{
                //     console.log("node.childNodes[i].tagName="+node.childNodes[i].tagName)
                // }
            }
        }
        return nodes;
    }

    function collect(url) {
        $.ajax({
            type: 'post',
            url: url,
            success: function (data) {
                if (data.success){
                    HFalert({title:data.message, type: 'success', confirmButtonText: '确定'});
                } else {
                    HFalert({title:data.message, type: 'warning', confirmButtonText: '确定'});
                }
            }
        });
    }
</script>
</html>